<template>
  <div class="jieqi-detail">
    <div class="bill-mask" @click="handleClose"></div>
    <div class="bill-content">
      <el-icon @click="handleClose">
        <ele-Close/>
      </el-icon>
      <div class="content-wrap">
        <img :src="picUrl" style="width: 100%">
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import {defineComponent, nextTick, onMounted, reactive, toRefs, watch} from 'vue';
import Config from '/@/components/jcalendar/config'

export default defineComponent({
  name: 'jieQiInfo',
  props: {
    detail: {
      type: Object,
      default: () => {
      }
    },
    tag: {
      type: String,
      default: () => "45346456"
    }
  },
  setup(props, {emit}) {
    const state = reactive({
      jieqiMap: Config.jieqis,
      picUrl: ''
    });
    onMounted(() => {
      nextTick(() => {
        openDialog(props.detail)
      })
    });
    watch(() => props.detail, (newVal) => {
      nextTick(() => {
        openDialog(props.detail)
      })
    })
    const openDialog = (row?: any) => {
      state.picUrl = import.meta.env.VITE_CDN_URL + "/jieqi/" + row.year + "_" + state.jieqiMap[row.jieqiName] + '.jpg';
    }
    const handleClose = () => {
      const elementToRemove = document.getElementById(props.tag);
      if (elementToRemove) {
        elementToRemove.remove();
      } else {
        // console.log('Element not found');
      }
    }
    return {
      ...toRefs(state),
      openDialog,
      handleClose,
    }
  }
});
</script>
<style lang="scss" scoped>
.jieqi-detail {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;

  .bill-mask {
    width: 100vw;
    height: 100vh;
    opacity: 0.5;
    background-color: #1c2518;
    position: absolute;
    z-index: 555;
  }

  .bill-content {
    border-radius: 2px;
    position: absolute;
    z-index: 888;
    width: 400px;
    height: 600px;
    display: block;
    //background-color: #ffffff;
    background-color: none;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -450px;

    .el-icon {
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
    }

    .content-wrap {
      height: calc(100% - 16px);
      background-color: #ffffff;
      border-radius: 10px;
      img{
        border-radius: 10px;
      }
    }
  }
}
</style>
